<template>
  <a-spin :loading="loading" style="width: 100%">
    <a-form ref="formRef" :model="formModel">
      <a-form-item field="logo_url" label="Logo" label-col-flex="100px">
        <logo-upload :single-file="logoFile" :show-file-list="false" accept="image/jpeg, image/png" @uploadCallback="logoCallback"/>
        <template #extra>
          <div>jpg、png格式，200 x 200，小于 200 KB。</div>
        </template>
      </a-form-item>
      <a-form-item field="favicon_url" label="Favicon" label-col-flex="100px">
        <favicon-upload :single-file="faviconFile" :show-file-list="false" accept="image/jpeg, image/png, image/x-icon" @uploadCallback="faviconCallback"/>
        <template #extra>
          <div>jpg、png、ico格式，128 x 128，小于 100 KB。</div>
        </template>
      </a-form-item>
      <a-form-item field="system_name" label="系统简称" label-col-flex="100px">
        <a-input v-model="formModel.system_name" placeholder="" style="width: 40%"/>
      </a-form-item>
      <a-form-item field="page_title" label="页面标题" label-col-flex="100px">
        <a-input v-model="formModel.page_title" placeholder="" style="width: 40%"/>
      </a-form-item>
      <a-form-item label="" label-col-flex="100px">
        <a-space>
          <a-button type="primary" @click="submit">
            <icon-send /> 保存
          </a-button>
        </a-space>
      </a-form-item>
    </a-form>
  </a-spin>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { FormInstance } from '@arco-design/web-vue/es/form';

  import useLoading from '@/hooks/loading';
  import { apiSetting } from '@/api/common';
  import LogoUpload from '@/components/file-upload/index.vue';
  import FaviconUpload from '@/components/file-upload/index.vue';

  const { loading, setLoading } = useLoading(true);
  const baseFormModel = {
    logo_url: '',
    favicon_url: '',
    system_name: '',
    page_title: '',
  };
  const formRef = ref<FormInstance>();
  const formModel = ref<any>(baseFormModel);

  const logoFile = ref<any>({});
  const faviconFile = ref<any>({});

  const fetchData = async () => {
    try {
      const { data } = await apiSetting();
      formModel.value = data;
    } catch (err) {
      // you can report use errorHandler or other
    } finally {
      setLoading(false);
    }
  };
  // 提交
  const submit = async () => {
    try {
      const ruleRes = await formRef.value?.validate();
      if (!ruleRes) {
        setLoading(true);
        await apiSetting(formModel.value, 'post');
      }
    } catch (err) {
      setLoading(false);
    } finally {
      setLoading(false);
    }
  };

  // 文件上传回调
  const logoCallback = (file: any) => {
    logoFile.value = {
      url: file.url,
      path: file.url,
    };
    formModel.value.logo_url = file.filepath;
  };
  const faviconCallback = (file: any) => {
    faviconFile.value = {
      url: file.url,
      path: file.url,
    };
    formModel.value.favicon_url = file.filepath;
  };

  fetchData();
</script>

<style scoped lang="less"></style>
